<template>
  <out-line-d
    :position="position"
    :id="element.id"
    :search="true"
    :width="520"
    :height="0"
    :padding="0"
    @closeLayer="closeLayer"
  >
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="企业查询">
        <a-form-model class="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item label="环保管理类别" labelAlign="left">
                <h-select v-model="form.epType" dictName="tb_ep_type" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="生产状况">
                <h-select v-model="form.estate" dictName="tb_estate" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item has-feedback label="风险等级">
                <h-select v-model="form.epeRisk" dictName="tb_risk_level" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item has-feedback label="租赁企业">
                <h-select v-model="form.isLeasingEnterprise" dictName="yes_no" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item has-feedback label="园中园企业">
                <h-select v-model="form.isParkEnterprise" dictName="yes_no" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item has-feedback label="涉及投诉">
                <h-select v-model="form.isComplaints" dictName="yes_no" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item has-feedback label="涉水企业">
                <h-select v-model="form.wade" dictName="is_involve" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item has-feedback label="涉气企业">
                <h-select v-model="form.gas" dictName="is_involve" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="24">
              <div class="btn-box">
                <a-button class="btn" type="primary" @click="reset">重置</a-button>
                <a-button class="btn" type="primary" @click="searchData">查询</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form-model>
        <div class="table">
          <Table :data="data" :columns="columns" :pagination="pagination" @change="change" :more="false">
            <template slot="action" slot-scope="text">
              <span class="btns" @click="jumpUrl(text)"
                ><img class="detail-image" :src="require('@assets/gis/detail.svg')"
              /></span>
            </template>
          </Table>
        </div>
      </a-tab-pane>
    </a-tabs>
  </out-line-d>
</template>
<script>
  import OutLineD from '@comp/gis/outlined'
  import Table from '@comp/gis/table'
  import HSelect from '@comp/gis/hselect'
  import {mapState} from 'vuex'
  import {epQuery} from '@/api/gis'

  export default {
  components: {
    OutLineD,
    Table,
    HSelect,
  },
  props: {
    element: {
      type: Object,
      default: () => {},
    },
    position: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      form: {
        epType: '', //环保类别
        estate: '', //生产状况
        epeRisk: '', //风险等级
        isLeasingEnterprise: '', //是否为租赁企业
        isParkEnterprise: '', //是否为园中园企业
        isComplaints: '', //是否涉及投诉
        gas: '', //涉气企业
        wade: '', //涉水企业
      },
      columns: [
        {
          title: '企业名称',
          dataIndex: 'enterpriseName',
          key: 'enterpriseName',
        },
        {
          title: '环保管理类别',
          dataIndex: 'epType_dictText',
          key: 'epType_dictText',
        },
        {
          title: '生产状况',
          dataIndex: 'estate_dictText',
          key: 'estate_dictText',
        },
        {
          title: '风险等级',
          dataIndex: 'epeRisk_dictText',
          key: 'epeRisk_dictText',
        },
        {
          title: '操作',
          dataIndex: 'name',
          key: 'name',
          scopedSlots: { customRender: 'action' },
        },
      ],
      data: [],
      pagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      },
    }
  },
  computed: {
    ...mapState(['parks']),
  },
  methods: {
    //关闭图层
    closeLayer() {
      this.$emit('setSearchLayer', false)
    },
    //重置
    reset() {
      this.form = {
        epType: '', //环保类别
        estate: '', //生产状况
        epeRisk: '', //风险等级
        isLeasingEnterprise: '', //是否为租赁企业
        isParkEnterprise: '', //是否为园中园企业
        isComplaints: '', //是否涉及投诉
        gas: '', //涉气企业
        wade: '', //涉水企业
      }
      this.pageNo = 1
      this.searchMsg()
    },
    //点击查询
    searchData() {
      this.pageNo = 1
      this.pagination= {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      };
      this.searchMsg()
    },
    //查询数据
    searchMsg() {
      const params = Object.assign({}, this.form, { parkId: this.parks[0].value, pageNo: this.pagination.pageIndex, pageSize: this.pagination.pageSize })
      epQuery(params).then((res) => {
        if (res.success) {
          this.data = res.result.records || []
          this.pagination.total = res.result.total || 0
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分页
    change(val) {
      this.pagination.pageIndex = val
      this.searchMsg()
    },
    //查询企业
    jumpUrl(text) {
      const _data = text.text
      //展示c区图层数据
      this.$emit('onSelectLayer', {
        name: 'enterprise',
        key: _data.id,
        value: _data.id,
      })
    },
  },
  mounted() {
    //初始化企业列表
    this.searchMsg()
  },
}
</script>
<style lang="less" scoped>
.form {
  padding: 0 24px;
  .btn-box {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 70px;
      height: 24px;
      margin-right: 10px;
    }
  }
}
.table {
  border-top: 1px solid rgba(25, 144, 253, 0.35);
  margin-top: 10px;
  padding: 7px 24px 14px;
}
.btns {
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.detail-image {
  width: 16px;
  height: 16px;
  display: block;
  cursor: pointer;
}
.time-picker {
  width: 100%;
  height: 24px;
  color: rgba(255, 255, 255, 0.65);
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 11px;
  position: relative;
  z-index: 1;
  em {
    width: 90%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
}
.active {
  color: #fff;
}
.hide-time {
  width: 100% !important;
  height: 24px;
  border: 1px solid rgba(2, 224, 247, 0.5);
  border-radius: 4px;
}
</style>